<template>
  <view class="community-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="title">考研社区</view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <text class="uni-icon-search"></text>
        <input type="text" placeholder="搜索帖子、话题" />
      </view>
    </view>

    <!-- 话题标签 -->
    <view class="topics">
      <scroll-view class="topic-scroll" scroll-x>
        <view
          class="topic-tag"
          v-for="(tag, index) in topics"
          :key="index"
          :class="{ active: activeTopicIndex === index }"
          @tap="activeTopicIndex = index"
        >
          {{ tag.name }}
        </view>
      </scroll-view>
    </view>

    <!-- 帖子列表 -->
    <view class="post-list">
      <view class="post-item" v-for="(post, index) in posts" :key="index">
        <view class="post-header">
          <view class="user-info">
            <image class="avatar" :src="post.avatar" mode="aspectFill"></image>
            <view class="user-details">
              <text class="username">{{ post.username }}</text>
              <text class="post-time">{{ post.time }}</text>
            </view>
          </view>
          <view class="topic-label">{{ post.topic }}</view>
        </view>

        <view class="post-content">
          <text class="post-title">{{ post.title }}</text>
          <text class="post-text">{{ post.content }}</text>

          <view class="post-images" v-if="post.images && post.images.length">
            <image
              class="post-image"
              v-for="(img, imgIndex) in post.images"
              :key="imgIndex"
              :src="img"
              mode="aspectFill"
            ></image>
          </view>
        </view>

        <view class="post-footer">
          <view class="action-button">
            <text class="action-icon">👍</text>
            <text class="action-text">{{ post.likes }}</text>
          </view>
          <view class="action-button">
            <text class="action-icon">💬</text>
            <text class="action-text">{{ post.comments }}</text>
          </view>
          <view class="action-button">
            <text class="action-icon">🔄</text>
            <text class="action-text">{{ post.shares }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 发帖按钮 -->
    <view class="floating-button">
      <text class="plus-icon">+</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 话题标签
const topics = ref([
  { name: '推荐', id: 0 },
  { name: '经验分享', id: 1 },
  { name: '考研政治', id: 2 },
  { name: '英语备考', id: 3 },
  { name: '数学攻略', id: 4 },
  { name: '专业课', id: 5 },
  { name: '院校信息', id: 6 },
  { name: '调剂信息', id: 7 },
])
const activeTopicIndex = ref(0)

// 帖子数据
const posts = ref([
  {
    username: '考研小达人',
    avatar: '/static/images/avatar1.jpg',
    time: '10分钟前',
    topic: '经验分享',
    title: '22考研复试上岸经验',
    content:
      '历经近一年的复习，终于等到了复试，今天来分享一下我的复试备考经验和实际面试感受，希望能帮助到学弟学妹们...',
    images: ['/static/images/post1.jpg', '/static/images/post2.jpg'],
    likes: 56,
    comments: 23,
    shares: 7,
  },
  {
    username: '数学大神',
    avatar: '/static/images/avatar2.jpg',
    time: '2小时前',
    topic: '数学攻略',
    title: '高数18讲课后习题解析',
    content:
      '张宇老师的《高数18讲》对考研数学复习非常有帮助，但有些同学反映课后习题有难度，今天我来分享一下我整理的详细解题思路...',
    images: [],
    likes: 128,
    comments: 45,
    shares: 32,
  },
  {
    username: '政治学姐',
    avatar: '/static/images/avatar3.jpg',
    time: '昨天',
    topic: '考研政治',
    title: '肖秀荣1000题做题技巧',
    content:
      '肖秀荣政治1000题是考研政治复习的必备资料，但很多同学不知道如何高效利用。我总结了一套做题方法，让你事半功倍...',
    images: ['/static/images/post3.jpg'],
    likes: 210,
    comments: 89,
    shares: 54,
  },
])
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.community-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;

  .header {
    height: 180rpx;
    background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 30rpx 20rpx;

    .title {
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .search-box {
    padding: 30rpx;

    .search-input {
      height: 80rpx;
      background: #fff;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .uni-icon-search {
        font-size: 32rpx;
        color: #999;
        margin-right: 20rpx;
      }

      input {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  }

  .topics {
    padding: 0 0 20rpx;

    .topic-scroll {
      white-space: nowrap;

      .topic-tag {
        display: inline-block;
        padding: 10rpx 30rpx;
        background-color: #fff;
        border-radius: 30rpx;
        margin: 0 10rpx;
        font-size: 26rpx;
        color: #666;

        &:first-child {
          margin-left: 30rpx;
        }

        &:last-child {
          margin-right: 30rpx;
        }

        &.active {
          background-color: $theme-color;
          color: #fff;
        }
      }
    }
  }

  .post-list {
    padding: 0 30rpx;

    .post-item {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .post-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .user-info {
          display: flex;
          align-items: center;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          .user-details {
            .username {
              font-size: 28rpx;
              font-weight: bold;
              color: #333;
              display: block;
            }

            .post-time {
              font-size: 22rpx;
              color: #999;
            }
          }
        }

        .topic-label {
          font-size: 24rpx;
          color: $theme-color;
          background-color: rgba(147, 112, 219, 0.1);
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
        }
      }

      .post-content {
        margin-bottom: 20rpx;

        .post-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 15rpx;
          display: block;
        }

        .post-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          margin-bottom: 15rpx;
          display: block;
        }

        .post-images {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5rpx;

          .post-image {
            width: calc(33.33% - 10rpx);
            height: 200rpx;
            margin: 5rpx;
            border-radius: 10rpx;
          }
        }
      }

      .post-footer {
        display: flex;
        border-top: 1px solid #f5f5f5;
        padding-top: 20rpx;

        .action-button {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .action-icon {
            font-size: 32rpx;
            margin-right: 10rpx;
          }

          .action-text {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }

  .floating-button {
    position: fixed;
    right: 40rpx;
    bottom: 140rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: $theme-color;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8rpx 16rpx rgba(147, 112, 219, 0.4);

    .plus-icon {
      color: #fff;
      font-size: 60rpx;
      font-weight: bold;
    }
  }
}
</style>
